<style lang='scss' scoped>
.Withdrawalrecord {
    width: 100%;
    height: 99.9%;
    overflow: auto;
    font-size: 0.8rem;
    padding: 0.8rem;
    .Withdrawalrecord_toptab {
        display: flex;
        justify-content: space-between;
        font-size: 0.6rem;
        .list {
            background-color: #fff;
            padding: 0.5rem 0.8rem;
            border-radius: 0.5rem;
            border: #fff solid 1px;
        }
        .listactive {
            background-color: #f8efe9;
            border: #f9924d solid 1px;
            color: #f9924d;
        }
    }
    .listbox {
        .list {
            background-color: #fff;
            border-radius: 0.5rem;
            padding: 1rem 1.2rem;
            margin-top: 1rem;
            position: relative;
            .top {
                position: absolute;
                right: 0;
                top: 0;
                .text {
                    color: #fff;
                    padding: 0.2rem 0.8rem;
                    border-radius: 0 1rem 0 1rem;
                    font-size: 0.6rem;
                }
                .icon-type1 {
                    background-color: #ffa800;
                }
                .icon-type2 {
                    background-color: #ffa800;
                }
                .icon-type3 {
                    background-color: #2db918;
                }

                .icon-type4 {
                    background-color: #ff525d;
                }
                .icon-type5 {
                    background-color: #999999;
                }
            }
            .shang {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    .incometype {
                        color: #000;
                        font-weight: bold;
                    }
                    .account {
                        font-size: 0.6rem;
                    }
                }
                .rigth {
                    color: #3b3838;
                }
            }
            .xia {
                display: flex;
                justify-content: space-between;
                color: #999;
                margin-top: 0.5rem;
                .red {
                    color: rgb(218, 38, 38);
                }
            }
            .footer_p {
                margin-top: 0.5rem;
                color: rgb(218, 38, 38);
                font-size: 0.6rem;
            }
        }
    }
}
</style>

<template>
    <view class="Withdrawalrecord">
        <u-navbar title="提现记录"> </u-navbar>
        <view class="Withdrawalrecord_box">
            <view class="Withdrawalrecord_toptab">
                <view class="list" v-for="(item, index) in state.Withdrawalrecord_toptablist" :key="index" :class="state.listactive == index?'listactive':''" @click="Withdrawalrecord_toptab(item,index)">
                    {{item.name}}
                </view>
            </view>
            <view class="listbox" v-if="state.withdrawData.length">
                <view class="list" v-for="(item, index) in state.withdrawData" :key="index">
                    <view class="top">
                        <view class="text" :class="'icon-type' + item.deal_status">{{deal_status[item.deal_status]}}</view>
                    </view>
                    <view class="shang">
                        <view class="left">
                            <view class="incometype">{{incometype[item.type]}}</view>
                            <view class="account">{{'储蓄卡'+ item.account}}</view>
                        </view>
                        <view class="rigth">
                            {{item.create_time}}
                        </view>
                    </view>
                    <view class="xia">
                        <view class="left">
                            <view>
                                提现：￥{{item.amount}}
                            </view>
                            <view>
                                到账：￥{{item.receive_amount}}
                            </view>
                        </view>
                        <view class="rigth">
                            <view class="red">
                                手续费：￥{{item.fee}}
                            </view>
                            <view>
                                余额：￥{{item.balance}}
                            </view>
                        </view>
                    </view>
                    <view class="footer_p" v-if="item.explain">
                        {{item.explain}}
                    </view>
                </view>
            </view>
            <view class="footer_image" v-else>

                <u-nodata></u-nodata>
            </view>
        </view>
    </view>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { withdrawList } from "@/api/user";
import { incometype, deal_status } from "@/utils/dictionary";
const state = reactive<{
    Withdrawalrecord_toptablist: Array;
    listactive: number;
    withdrawData: Array;
}>({
    withdrawData: [],
    listactive: 0,
    Withdrawalrecord_toptablist: [
        {
            name: "全部",
            type: 0,
        },
        {
            name: "提现中",
            type: 1,
        },
        {
            name: "已通过",
            type: 2,
        },
        {
            name: "未通过",
            type: 3,
        },
        {
            name: "取消提现",
            type: 4,
        },
    ],
});
onLoad(() => {});
onShow(() => {
    getData();
});
const Withdrawalrecord_toptab = (item, index) => {
    state.listactive = index;
    getData();
};
const getData = async () => {
    uni.showToast({ title: "查询中", icon: "loading" });
    const withdrawData = await withdrawList({
        deal_type: state.listactive,
    });
    state.withdrawData = withdrawData.lists || [];
    uni.hideToast();
};
</script>